<template>
  <div class="rightMiddle">
    <div class="title">
      <span class="word">点位在线分析</span>
    </div>
    <div class="line"></div>
    <div class="pic1">
      <div class="box1">
        <ul>
          <li>当前总数</li>
          <li>当前启用数</li>
          <li>当前在线数</li>
        </ul>
        <ul class="ul2">
          <li>260</li>
          <li>260</li>
          <li>250</li>
        </ul>
      </div>
      <div>
        <scEcharts id="chartDom" width="900px" height="300px" :option="option">
        </scEcharts>
      </div>
    </div>
  </div>
</template>

<script setup>
// import {reactive } from 'vue'
import scEcharts from "@/components/scEcharts";
var option = {
   title: {
    subtext: '点位分布',
    left: '20%',
    top:'10%'
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    // left: "5%",

    orient: 'vertical',
    right: '10%',
    top: '40%',
    itemWidth: 15,
    itemHeight: 15,
  },

  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: true,
        position: "outside",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "14",
          color: [
            "rgb(174, 221, 255)",
            "rgb(103, 159, 196)",
            "rgb(65, 183, 204)",
            "rgb(67, 194, 243)",
            "rgb(61, 169, 241)",
            "rgb(61, 169, 241)",
            "rgb(47, 133, 224)",
            "rgb(37, 103, 197)",
          ],
        },
      },
      labelLine: {
        show: true,
      },
      color: [
        "rgb(174, 221, 255)",
        "rgb(103, 159, 196)",
        "rgb(65, 183, 204)",
        "rgb(67, 194, 243)",
        "rgb(61, 169, 241)",
        "rgb(47, 133, 224)",
        "rgb(37, 103, 197)",
      ],
      data: [
        { value: 448, name: "冷热源" },
        { value: 535, name: "冷水" },
        { value: 580, name: "热水" },
        { value: 484, name: "冷却水" },
        { value: 300, name: "板换" },
        { value: 300, name: "末端舒适性" },
      ],
    },
  ],
};
</script>

<style scoped lang="less">
ul {
  list-style: none;
}
.rightMiddle {
  // width: 1236px;
  // height: 334px;
  width:100%;
  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  padding: 10px;
  line-height: 20px;
  font-weight: normal;
  background-color: white;
  margin-top: 20px;
  font-style: normal;
  .title {
    padding: 20px;
    display: flex;
    width: 1180px;
    position: relative;
    .word {
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 28px;
      text-decoration: none;
    }
  }
  .line {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }
  .pic1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .box1 {
    width: 250px;
    display: flex;
    height: 100%;
    padding-left: 40px;
    padding-top: 55px;
    ul {
      padding: 5px;
      float: left;
      li {
        margin: 10px;
        padding-bottom: 40px;
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 14px;
        color: rgb(126, 126, 126);
        font-style: normal;
        letter-spacing: 0px;
        text-decoration: none;
      }
    }
    /deep/.el-button > span {
      color: white;
      display: inline-flex;
      align-items: center;
    }
    .ul2 {
      // padding: 10px;
      float: left;
      li {
        margin: 10px;
        font-family: SourceHanSansSC;
        font-weight: 500;
        font-size: 22px;
        color: rgb(58, 124, 206);
        font-style: normal;
        letter-spacing: 0px;
        font-weight: 500;
        text-decoration: none;
      }
    }
  }
}
</style>
